<template>
    <div class="select">
      <picker class="s1" mode="date" :value="date" :start="date" end="2030-09-01" @change="bindDateChange">
        <input  :value=date name="date1">
      </picker>
      <picker class="s2" mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
        <input :value=time name="time1">
      </picker>
    </div>
      

</div>
</template>

<script>
export default {
  data(){
    return {
      date: '',
      time:' 00:00'
    }
  },
  mounted() {
    let today = this.getToday()
    this.date = today
    
  },
  methods: {
    getToday(){
      let myDate = new Date();
      let myMonth = myDate.getMonth() + 1;
      if(myMonth < 10){
        myMonth = '0'+ myMonth;  //补齐
      }
      let mydate = myDate.getDate();
      if(myDate.getDate()<10){
         mydate = '0'+ myDate.getDate();  //补齐
      }
      let today = myDate.getFullYear() + '-' + myMonth + '-' + mydate;
      return today
   },
    bindDateChange(e) {
      this.date = e.target.value
    },
    bindTimeChange(e) {
      this.time = e.target.value
    },
  },
}

</script>

<style scoped>
.select{
  width:100%;
  height:25px;
}
.select .s1{
  width:50%;
  display: inline-block;
}

.select .s2{
  width: 40%;
  display: inline-block;
  
}

    
</style>